import React, { Component } from 'react';

// 子组件
export class Child extends Component {
  render() {
    console.log('子', this.props);
    return (
      <div className="child">
        {/* <div className="product">
          <h3>标题：{this.props.item.name}</h3>
          <div>价格：{this.props.item.price}</div>
          <div>{this.props.item.info}</div>
        </div> */}
        <div className="product">
          <h3>标题：{this.props.name}</h3>
          <div>价格：{this.props.price}</div>
          <div>{this.props.info}</div>
        </div>
      </div>
    );
  }
}

export const Child2 = (props) => {
  // 抽离成函数组件
  return (
    <div className="child">
      {/* <div className="product">
          <h3>标题：{this.props.item.name}</h3>
          <div>价格：{this.props.item.price}</div>
          <div>{this.props.item.info}</div>
        </div> */}
      <div className="product">
        <h3>标题：{props.name}</h3>
        <div>价格：{props.price}</div>
        <div>{props.info}</div>
      </div>
    </div>
  );
};
